<template>
	<div>
		<nut-popup
			lock-scroll
			position="bottom"
			:style="{ borderRadius: '10px 10px 0 0 ', padding: 0 }"
			v-model:visible="isVisible"
			@clickOverlay="onClose"
		>
			<div class="addModel">
				<div class="flex flexBetween padding">
					<div class="address">选择自提点</div>
					<nut-icon name="close" class="close" @click="onClose"></nut-icon>
				</div>

				<div class="init-box" id="customScroll">
					<ul class="infiniteUl">
						<nut-infiniteloading
							container-id="customScroll"
							:use-window="false"
							load-icon="refresh2"
							:has-more="hasMore"
							@load-more="loadMore"
						>
							<li
								class="infiniteLi"
								v-for="item in listData.list"
								:key="item.id"
							>
								<ADDRESSCARD :address="item" @click="choseAddress(item)">
									<template #chose>
										<nut-image
											v-if="currentSelect == item.id"
											class="hasChoseIcon"
											:src="getAssetsFile('home/payOrder/chosePay.png')"
										></nut-image>
										<nut-image
											v-else
											class="noChoseIcon"
											:src="getAssetsFile('home/payOrder/noChose.png')"
										></nut-image>
									</template>
								</ADDRESSCARD>
							</li>
						</nut-infiniteloading>
					</ul>
				</div>
				<div class="footer">
					<nut-divider
						style="color: #eeeeee; margin: 0px 0 10px 0 !important"
					/>
					<div class="footer-item">
						<nut-button
							type="primary"
							block
							color="linear-gradient(to right, #3EBD33, #9FDF4F)"
							@click="save"
							>确定</nut-button
						>
					</div>
				</div>
			</div>
		</nut-popup>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Toast } from '@nutui/nutui'
import { EditType } from '@/type/BaseEnum'
import { getAssetsFile, isRes } from '@/utils/pub-use'
import ADDRESSCARD from '@/components/addressCard/index.vue'
import useAddRessModel from '@/composable/manage/useAddressModel'
import useInstance from '@/hooks/useInstance'
const { global } = useInstance()
const emits =defineEmits(['save'])
const {
	getGrouppbuy,
	listData,
	loadMore,
	hasMore,
	reset,
	currentSelect,
	choseAddress,
	  newdata,
	  newrow
} = useAddRessModel()
const isVisible = ref<boolean>(false)
 
const onClose = () => {
	isVisible.value = false
	reset()
}

const show = (type: string, row: any) => {
	getGrouppbuy(row)
	isVisible.value = true
}
const save = () => {
        emits("save",{
			newdata:newdata.value,
			newrow:newrow.value,
            currentSelect:currentSelect.value
        })
		onClose();
    }
defineExpose({
	show
})
</script>
<style scoped lang="scss">
.addModel {
	border-radius: 20px 20px 0 0;
	height: 80vh;
}

.padding {
	position: fixed;
	padding: 36px 30px;
	left: 0;
	right: 0;
	height: 50px;
	background: #fff;
	z-index: 9;
	border-radius: 20px 20px 0 0;
}

.address {
	font-size: 32px;
	font-weight: bold;
	color: #000;
}

.close {
	font-size: 26px !important;
	font-weight: bold;
}

.nbg {
	height: 20px;
	background: #f8f9fa;
}
.init-box {
	position: absolute;
	left: 0;
	right: 0;
	top: 124px;
	bottom: 140px;
	overflow: auto;
}
.infiniteUl {
	height: 100%;
}
:deep(.bottom-box) {
	display: flex;
	justify-content: center;
	align-items: center;
}
:deep(.nut-infiniteloading .nut-infinite-bottom) {
	padding-top: 0 !important;
}

.addressItem {
	margin-top: 20px;
	padding: 0 30px;
}
.addressItem:nth-child(1) {
	margin-top: 0;
}
.hasChoseIcon,
.noChoseIcon {
	width: 36px;
	height: 36px;
	margin-right: 34px;
}
.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120px;
	background: #fff;
	padding: 10px 0;
	.footer-item {
		padding: 0 20px;
	}
}
</style>
